<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="./styles/global.css">
		<link rel="stylesheet" href="dependencies/element-ui-2.15.14/index.css">
		<script type="text/javascript" src="./dependencies/vue-2.7.16/vue.js"></script>
		<script type="text/javascript" src="dependencies/element-ui-2.15.14/index.js"></script>
		<script type="text/javascript" src="./dependencies/axios/axios.min.js"></script>
	</head>
	<style>
		#app {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(to bottom, #e1f5fe, #bbdefb);
		}

		.form {
			display: grid;
			flex-direction: column;
			width: 300px;
			padding: 20px;
			border-radius: 15px;
			background: linear-gradient(to bottom, #84e3eb, #99d1cb);
		}

		.form> :first-child {
			margin-bottom: 10px
		}
	</style>
	</head>
	<body>
		<div id="app">
			<el-form class="form">
				<el-input placeholder="请输入用户名" v-model="form.username"></el-input>
				<el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
				<div class="form-item">
					<el-checkbox v-model="form.rememberMe">记住我</el-checkbox>
					<el-button type="text">忘记密码</el-button>
				</div>
				<el-button type="primary" @click="handleLogin0()">登录</el-button>
			</el-form>
		</div>

		</div>
	</body>

	<script>
		new Vue({
			el: '#app',
			data: {
				form: {
					username: 'admin',
					password: 'admin',
					rememberMe: false
				}

			},
			methods: {
				handleLogin0() {
					this.$message({
						message: '登录成功',
						type: 'success',
						duration: 200,
					});
					window.location.href = 'views/layout.html';
				},
				handleLogin() {
					axios.post('/user/login', this.form).then((res) => {
						if (res.data.code === 200) {
							this.$message({
								message: '登录成功',
								type: 'success',
								duration: 200,
							});
							window.location.href = 'views/layout.html';
						} else {
							this.$message.error('登录失败');
						}
					});
				},
			}
		});
	</script>
</html>